<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Login Example - Semantic</title>
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/site.css">

  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/container.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/grid.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/header.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/image.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/menu.css">

  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/divider.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/segment.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/form.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/input.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/button.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/list.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/message.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/icon.css">

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/form.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.js"></script>

  <style type="text/css">
    body {
      background-color: #DADADA;
    }

    body > .grid {
      height: 100%;
    }

    .image {
      margin-top: -100px;
    }

    .column {
      max-width: 450px;
    }
  </style>
  <script>
    $(document)
        .ready(function () {
          $('.ui.form')
              .form({
                fields: {
                  email: {
                    identifier: 'email',
                    rules: [
                      {
                        type: 'empty',
                        prompt: 'Please enter your e-mail'
                      },
                      {
                        type: 'email',
                        prompt: 'Please enter a valid e-mail'
                      }
                    ]
                  },
                  password: {
                    identifier: 'password',
                    rules: [
                      {
                        type: 'empty',
                        prompt: 'Please enter your password'
                      },
                      {
                        type: 'length[6]',
                        prompt: 'Your password must be at least 6 characters'
                      }
                    ]
                  }
                }
              })
          ;
        })
    ;
  </script>
</head>
<body>

<div class="ui middle aligned center aligned grid">
  <div class="column">
    <h2 class="ui teal image header">
      <img src="https://s21.lgstatic.com/growth/activity/20210729/1627528017710.png?x-oss-process=style/80" class="image">
      <div class="content">
        Log-in to your account
      </div>
    </h2>
    <form class="ui large form" onsubmit="return false;">
      <div class="ui stacked segment">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input type="text" id="email" name="email" placeholder="E-mail address">
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input type="password" id="password" name="password" placeholder="Password">
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input type="请输入验证码" id="checkCode" name="checkCode" placeholder="请输入验证码" >
            <button  id="yanzhengma" class="ui secondary button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
              请输入验证码
            </font>
            </font>
            </button>
          </div>
        </div>
        <div class="ui fluid large teal submit button" id="registry">Login</div>
      </div>

      <div class="ui error message"></div>

    </form>

    <div class="ui message">
      <!--      New to us? <a href="/templates/registry.html">Registry</a>-->
      <button  id="registy" class="ui secondary button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
        注册
      </font>
      </font>
      </button>
    </div>
  </div>
</div>
<script type="text/javascript" charset="UTF-8">

  // ("#returnlogin".on("click",function (){
  //   location.href="login.html";
  // }))

  //一分钟内只能输入一次验证码请求
  var checkCodeTime = Date.now() + 1000 * 60 ;


  // 注册账号
  $("#registry").on("click", function () {
    $.ajax({
      url: "/api/user/create/account",
      type: "POST",
      data: {
        email: $("#email").val(),
        password: $("#password").val(),
        checkCode: $("#checkCode").val(),
      },
      resultType: "JSON",
      success: function (result) {
        alert(result.message);
      },
      error: function (result) {
      }
    });
  });


  //获取验证码
  $("#yanzhengma").on("click",function (){
    if(checkCodeTime < Date.now()){
      alert("一分钟内只允许登录一次,请稍后.......");
      return
    }
    $.ajax({
      url:"/api/user/create/code",
      type:"POST",
      data:{
        email: $("#email").val(),
      },
      success: function (result){
        alert("验证码发送成功!")
      },
      error: function (result){
        alert("验证码发送失败!")
      }
    })
  })
</script>
</body>

</html>


